/**
 * Created by Administrator on 2019/10/11.
 */
window.onload = function(){
	/*1.顶部搜索*/
	search();
	/*2.04.轮播图*/
	banner();
	/*3.倒计时*/
	downTime();
	
};
var search = function(){
	/*1.默认固定顶部透明背景*/
	/*2.当页面滚动的时候---随着页面卷曲的高度变大透明度变大*/
	/*3.当页面滚动的时候---超过某一个高度的时候透明度不变*/
	var searchBox = document.querySelector('.jd_search_box');
	var banner = document.querySelector('.jd_banner');
	var height = banner.offsetHeight;
	/*监听页面滚动事件*/
	window.onscroll = function(){
		/*获取卷曲的高度*/
		/*第一个支持谷歌浏览器*/
		/*
		console.log(document.body.scrollTop);
		console.log(document.documentElement.scrollTop);
		console.log(window.pageYOffset);	
		*/
		var scrollTop = document.documentElement.scrollTop
					||window.pageYOffset
					||document.body.scrollTop
					||0;
		/*这边使用document.body会有DTD 的问题*/
		console.log(scrollTop);
		/*默认的透明度*/
		var opacity = 0;
		if(scrollTop < height){
			/*2.当页面滚动的时候---随着页面卷曲的高度变大透明度变大*/
			opacity = scrollTop / height * 0.85;
		}else{
			/*3.当页面滚动的时候---超过某一个高度的时候透明度不变*/
			opacity = 0.85;
		}
		searchBox.style.background = 'rgba(201,21,35,'+opacity+')';
	}
};

var banner = function(){
	/*触摸事件touch*/
	/*解释touch
		1.touch是移动端的触摸属性  而且是一组事件
		2.touchstart	当手指触摸屏幕的时候触发
		3.touchmove		当手指在屏幕中来回的滑动时候触发
		4.touchend		当手指离开屏幕的时候触发
		5.touchcancel	当被迫终止滑动的时候触发（如来电  弹消息）
		主要是前三个
		6.利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件 	
	*/
	/*使用touch
	1.绑定事件:
    	box.addEventListener('touchstart',function(){});
    2.事件对象：（以下三个为移动端独有）
   	 名字:TouchList-------触摸点（一个手指触摸就是一个触摸点，和屏幕的接触点的个数）的集合
   	 changedTouches	改变后的触摸点集合
   	 targetTouches	当前元素的触摸点集合
     touches		页面上所有触摸点集合
    3.触摸点集合在每个事件触发的时候会不会去记录触摸
      changedTouches	每个事件都会记录
   	  targetTouches  touches  在离开屏幕的时候无法记录触摸点
    4.分析滑动实现的原理：
      4.1让触摸的元素随着手指的滑动做位置的改变 
      4.2位置的改变，需要当前手指的坐标
      4.3在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
      4.4 clientX  clientY  基于浏览器窗口（基于视口）
      4.5 pageX    pageY    基于页面（视口）
      4.6 screenX  screenY  基于屏幕
*/

	/*
		1.自动轮播图且无缝   ==> 定时器，动画（过渡）
		2.点要随着图片的轮播改变  ==>  根据索引切换
		3.轮播图要具有滑动效果  ==>  利用touch事件完成
		4.滑动结束的时候  如果滑动的距离不超过屏幕的1/3就  吸附回去  ==>  过渡
		5.滑动结束的时候  如果滑动的距离超过屏幕的1/3就  切换（上一张，下一张）  ==>  根据滑动的方向  过渡
	*/
	
	/*04.轮播图*/
	var banner = document.querySelector('.jd_banner');
	/*屏幕的宽度*/
	var width = banner.offsetWidth; 
	/*图片容器*/
	var imageBox = banner.querySelector('ul:first-child');
	/*点容器*/
	var pointBox = banner.querySelector('ul:last-child');
	/*所有的点*/
	var points = pointBox.querySelectorAll('li');
	
	var addTransition = function(){
		imageBox.style.transition = 'all 0.2s';
		imageBox.style.webkitTransition = 'all 0.2s';
	}
	
	var removeTransition = function(){
		imageBox.style.transition = 'none'; 
		imageBox.style.webkitTransition = 'none';
	}
	
	var setTranslateX = function(translateX){
		imageBox.style.transform = 'translateX('+translateX+'px)';
		imageBox.style.webkitTransform = 'translateX('+translateX+'px)';
	}
	
	/*程序的核心 index*/
	var index = 1;
	var timer = setInterval(function(){
		index++;
		/*加过渡*/
		/*imageBox.style.transition = 'all 0.2s';
		imageBox.style.webkitTransition = 'all 0.2s';*/
		addTransition();
		/*做位移*/
		/*imageBox.style.transform = 'translateX('+(-index*width)+'px)'; 
		imageBox.style.webkitTransform = 'translateX('+(-index*width)+'px)'; */
		setTranslateX(-index*width); 
	},3000);
	/*需要等最后一张动画结束去判断 是否瞬间定位第一张*/
	imageBox.addEventListener('transitionend',function(){
		/*自动滚动的无缝*/
		/*console.log('ok');*/
		if(index >= 9){
			index = 1;
			/*瞬间定位*/
			
			/*清过渡*/
			/*imageBox.style.transition = 'none'; 
			imageBox.style.webkitTransition = 'none';*/
			removeTransition();
			/*做位移*/	
			/*imageBox.style.transform = 'translateX('+(-index*width)+'px)';
			imageBox.style.webkitTransform = 'translateX('+(-index*width)+'px)';*/
			setTranslateX(-index*width); 
		}
		/*滑动的时候也需要无缝*/
		else if(index <= 0){
			index = 8;	
			/*瞬间定位*/
			/*清过渡*/
			/*imageBox.style.transition = 'none'; 
			imageBox.style.webkitTransition = 'none';*/
			removeTransition();
			/*做位移*/	
			/*imageBox.style.transform = 'translateX('+(-index*width)+'px)';
			imageBox.style.webkitTransform = 'translateX('+(-index*width)+'px)';*/
			setTranslateX(-index*width); 
		}
		/*根据索引设置点*/
		/*此时此刻  index  的取值范围  1-8*/
		/*点索引  index - 1*/
		setPoint();
	});
	
	/*设置点的方法*/
	var setPoint = function(){
		/*index 1-8 */
		/*这样写有问题 points对应的不是数组，没有forEach这个方法
		points.forEach(function(index,item){
			console.log(index);
		});*/
		
		/*清除样式*/
		for(var i = 0;i < points.length;i++){
			var obj = points[i];
			obj.classList.remove('now');
		}
		/*给对应的加上样式*/
		points[index-1].classList.add('now');
	}
	
	/*绑定事件*/
	var startX = 0;
	var distanceX = 0; 
	var isMove = false;
	imageBox.addEventListener('touchstart',function(e){
		/*清除定时器*/
		clearInterval(timer);
		/*记录起始位置的X坐标*/
		startX = e.touches[0].clientX; 
	});
	imageBox.addEventListener('touchmove',function(e){
		/*记录滑动过程当中的X坐标*/
		var moveX = e.touches[0].clientX; 
		/*计算位移  有正负方向*/
		distanceX = moveX - startX;
		/*计算目标元素的位移  不用管正负*/
		/*元素将要的定位=当前定位+手指移动的距离*/
		var translateX = -index * width + distanceX;
		/*滑动--->让触摸的元素随着手指的滑动做位置的改变*/
		removeTransition();/*清过渡*/
		setTranslateX(translateX); 
		isMove = true;
	});
	imageBox.addEventListener('touchend',function(e){
		/*4, 5实现*/
		/*要使用移动的距离*/
		if(isMove){
			if(Math.abs(distanceX) < width/3){
				/*吸附*/	
				addTransition();
				setTranslateX(-index * width);
			}else{
				/*切换*/	
				/*右滑动  上一张*/
				if(distanceX > 0){
					/*console.log('右');*/
					index --;
				}
				/*左滑动  下一张*/
				else{
					/*console.log('左');*/
					index ++;
				}
				/*根据index去做动画的移动*/
				addTransition();
				setTranslateX(-index * width);
			}
		}
		/*最好做一次参数的重置*/
		startX = 0;
		distanceX = 0;
		isMove = false;
		/*加上定时器*/
		clearInterval(timer);
		timer = setInterval(function(){
			index++;
			/*加过渡*/
			addTransition();
			/*做位移*/
			setTranslateX(-index*width); 
		},3000);
	});
	
};

var downTime = function(){
	/*倒计时的时间*/
	var time = 2*60*60;
	/*时间盒子*/
	var spans = document.querySelector('.time').querySelectorAll('span');
	/*每一秒去 更新显示的时间*/
	var timer = setInterval(function(){
		time --;
		/*格式还是秒  转换*/
		var h = Math.floor(time/3600);
		var m = Math.floor(time%3600/60);
		var s = time%60;
		
		spans[0].innerHTML = Math.floor(h/10);
		spans[1].innerHTML = h%10;
		
		spans[3].innerHTML =  Math.floor(m/10);
		spans[4].innerHTML = m%10;
		
		spans[6].innerHTML =  Math.floor(s/10);
		spans[7].innerHTML = s%10;
		
		if(time <= 0){
			clearInterval(timer);
		}
		
	},1000)
};